<template>
    <view class="container">
        <!-- 自定义导航区域开始 -->
        <TridentNavBar>
            <template #left>
                <!-- #ifdef MP-ALIPAY -->
                <i class="iconfont icon-zuojiantou" style="font-size: 36rpx;font-weight: bold;"></i>
                <!-- #else -->
                <i class="iconfont icon-zuojiantou" style="font-size: 36rpx;"></i>
                <!-- #endif -->
            </template>
            <template #default>待添加好友</template>
            <template #right >
                <!-- #ifdef MP-ALIPAY -->
                <i @click="goto('/pagesFriend/information/index')" class="iconfont icon-gengduo" style="font-size: 36rpx;font-weight: bold;"></i>
                <!-- #else -->
                <i @click="goto('/pagesFriend/information/index')" class="iconfont icon-gengduo" style="font-size: 36rpx;"></i>
                <!-- #endif -->
            </template>
        </TridentNavBar>
        <!-- 自定义导航区域结束 -->

        <!-- 用户信息区域开始 -->
        <view class="info-wrap">
            <view class="image-box">
                <image
                    :src="user?.avatar_url ? global.FILE_DOMAIN + user?.avatar_url : '/static/images/default_avatar.png'"
                />
            </view>

            <view class="info-box">
                <view class="username">{{user?.username}}</view>
                <view class="region">地区：{{ user?.region }}</view>
            </view>
        </view>
        <!-- 用户信息区域结束 -->

        <!-- 设置备注和标签 -->
        <TridentCellItem :item="{title: '设置备注和标签', url: '/pagesFriend/setLabel/index'}" />

        <!-- 个性签名 + 来源区域开始 -->
        <div class="panel-wrap">
            <TridentCellItem :item="{title: '个性签名', value: user?.selfdom_sign}" :is_arrows="false" />
            <TridentCellItem :item="{title: '来源', value: '来自手机号搜索'}" :is_arrows="false" />
        </div>
        <!-- 个性签名 + 来源区域结束 -->

        <view class="opt-wrap" @click="goto('/pagesFriend/apply/index?uid='+ user?.uid)">添加到通讯录</view>
    </view>
</template>

<script setup lang="ts">
import { goto } from '@/utils/tools'
import { reqUserInfoAPI } from '@/apis/user'
import type { User } from '@/types/user'
import { inject, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'

// 全局属性
const global: any = inject('global')

// 用户
const user = ref<User>()

// 获取页面参数
const query = defineProps({
    "uid": {
        type: String,
        default: '0'
    }
})

onShow(() => {
    getUserDetail()
})

// 请求接口,获取用户详情
const getUserDetail = async () => {
    const result = await reqUserInfoAPI(query.uid)
    user.value = result.data as never
}
</script>

<style scoped lang="scss">
.container {
    .info-wrap {
        padding-top: 20rpx;
        padding-left: 20rpx;
        background-color: #fff;
        display: flex;
        align-items: center;
        border-bottom: 2rpx solid #f5f5f5;
        padding-bottom: 40rpx;
        .image-box {
            width: 120rpx;
            height: 120rpx;
            line-height: 120rpx;
            border-radius: 10rpx;
            text-align: center;
            border: 2rpx solid #f1efef;
            overflow: hidden;
            image {
                width: 110rpx;
                height: 110rpx;
            }
        }

        .info-box {
            margin-left: 30rpx;
            .username {
                font-size: 36rpx;
                color: #000;
            }
            .region {
                color: #878585;
                margin-top: 10rpx;
                font-size: 24rpx;
            }
        }
    }

    .panel-wrap {
        margin-top: 20rpx;
    }

    .opt-wrap {
        margin-top: 20rpx;
        height: 100rpx;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #426189;
    }
}
</style>